<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件间数据的传递</title>
    <!-- 导入vue库依赖 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <input type="" name="" value="" v-model='msg'> </br>
        <span>{{msg}}</span>
        <p>-----------------------</p>
        <!-- 使用静态和动态方式传值都可以 传值参数定义 不能使用驼峰定义 html中是不识别大小写的 如果定义大写 编译之后就会处理成小写 导致html识别不了
        但是在字符串模板中是可以使用驼峰命名的-->

        <!-- 父组件向子组件传递的数据类型 string boolean number 数组 对象 如果使用V-bind的方式传递 传递的类型都是真实的 否则都是字符串类型 -->
        <title-show :ptitle='msg' :pnumber='12' :pboolean='true'></title-show>
    </div>
    <script>

        Vue.component('title-show', {
            // 增加props字段 接收父组件传递过来的参数
            // props: ['ptitle'],
            // 根据vue编写建议 需要定义属性的类型(字符串 数字 boolean值 数组和对象) String Number Boolean Array 和 Object
            props: {
                ptitle: String,
                pnumber: Number,
                pboolean: Boolean
            },
            data: function () {
                return {
                    msg: '子组件中显示的值'
                }
            },
            template: '<div>{{msg + " --------------  " + "父组件中传递过来的值 ： " + ptitle  + " -----  " + pnumber + " ----- " + pboolean}}</div>'
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件中显示的值'
            },
            methods: {
            },
        })
    </script>
</body>

</html>


<!--1.----------- 父组件向子组件传值   子组件中定义props属性并且指向数组-->